<template>
  <div class="security">
    <div class="plus"></div>
    <DefLayout nTitle="安全中心">
      <template>
        <ul>
          <li @click="showChangePassword">修改密码</li>
          <li @click="logOut">注销账号</li>
        </ul>
      </template>
    </DefLayout>
    <div class="btn">
      <van-button round color="#ff594d" block @click="signOut"
        >退出登录</van-button
      >
    </div>
    <van-popup
      class="resetPassword"
      v-model="showResetPassword"
      position="bottom"
      closeable
    >
      <div class="title">修改密码</div>
      <div class="inp">
        <van-field
          v-model="oldPassword"
          :type="showOldPassword ? 'password' : 'text'"
          name="旧密码"
          label="旧密码"
          placeholder="请输入旧密码"
          :right-icon="showOldPassword ? 'closed-eye' : 'eye-o'"
          autocomplete="off"
          @click-right-icon="toggleOld"
        />
        <van-field
          v-model="newPassword"
          :type="showNewPassword ? 'password' : 'text'"
          name="新密码"
          label="新密码"
          placeholder="请输入新密码"
          :right-icon="showNewPassword ? 'closed-eye' : 'eye-o'"
          autocomplete="off"
          @click-right-icon="toggleNew"
        />
      </div>
      <van-button round color="#ff594d" block @click="changePassword"
        >提交</van-button
      >
    </van-popup>
  </div>
</template>

<script>
import DefLayout from "@/components/DefLayout";

export default {
  name: "Security",

  components: {
    DefLayout,
  },

  data() {
    return {
      // 显示修改密码
      showResetPassword: false,
      oldPassword: "",
      newPassword: "",
      showOldPassword: true,
      showNewPassword: true,
    };
  },

  methods: {
    goBack() {
      this.$router.replace({ name: "User" });
    },

    // 切换显示密码
    toggleOld() {
      this.showOldPassword = !this.showOldPassword;
    },
    toggleNew() {
      this.showNewPassword = !this.showNewPassword;
    },

    // 修改密码
    showChangePassword() {
      this.showResetPassword = true;
    },

    // 修改密码
    changePassword() {
      if (!this.oldPassword) {
        this.$toast("旧密码不能为空");
        return;
      }
      if (!this.newPassword) {
        this.$toast("新密码不能为空");
        return;
      }
      let loginPasswrodReg = /^[A-Za-z\d]{6,16}$/;
      if (
        !loginPasswrodReg.test(this.oldPassword) ||
        !loginPasswrodReg.test(this.newPassword)
      ) {
        this.$toast("密码支持字母数字组合");
        return;
      }
      let tokenString = this.$cookies.get("TOKEN");
      this.axios({
        method: "POST",
        url: "/updatePassword",
        data: {
          tokenString,
          oldPassword: this.oldPassword,
          password: this.newPassword,
        },
      })
        .then((res) => {
          
          if (res.data.code == "E001") {
            this.$toast(res.data.msg);
            // 清除token
            this.$cookies.remove("TOKEN");
            // 延迟2秒后跳转到登录页面
            let timer = setTimeout(() => {
              clearTimeout(timer);
              this.$router.replace({ name: "Login" });
            }, 2000);
          }
          if (res.data.code == "E002") {
            this.$toast(res.data.msg);
          }
          if (res.data.code == "E003") {
            this.$toast(res.data.msg);
          }
        })
        .catch((err) => {});
    },

    // 注销账号
    logOut() {
      this.$dialog
        .confirm({
          title: "提示",
          message: "是否确认注销账号？一旦注销无法恢复！",
        })
        .then(() => {
          let tokenString = this.$cookies.get("TOKEN");
          this.axios({
            method: "POST",
            url: "/destroyAccount",
            data: {
              tokenString,
            },
          })
            .then((res) => {
              // 
              if (res.data.code == "G001") {
                this.$toast(res.data.msg);
                // 清除token
                this.$cookies.remove("TOKEN");
                // 延迟2秒后跳转到登录页面
                let timer = setTimeout(() => {
                  clearTimeout(timer);
                  this.$router.replace({ name: "Login" });
                }, 2000);
              }
            })
            .catch((err) => {});
        })
        .catch(() => {});
    },

    // 退出登录
    signOut() {
      this.$dialog
        .confirm({
          title: "提示",
          message: "是否确认退出登录",
        })
        .then(() => {
          let tokenString = this.$cookies.get("TOKEN");
          this.axios({
            method: "POST",
            url: "/logout",
            data: {
              tokenString,
            },
          })
            .then((res) => {
              // 
              if (res.data.code == "F001") {
                this.$toast(res.data.msg);
                // 清除token
                this.$cookies.remove("TOKEN");
                // 延迟2秒后跳转到登录页面
                let timer = setTimeout(() => {
                  clearTimeout(timer);
                  this.$router.replace({ name: "Login" });
                }, 2000);
              }
            })
            .catch((err) => {});
        })
        .catch(() => {});
    },
  },
};
</script>

<style lang="less" scoped>
.resetPassword {
  padding: 20px 15px;
  color: #333;
  font-size: 14px;
  box-sizing: border-box;
  .title {
    margin-top: -2px;
    margin-bottom: 15px;
    font-weight: bold;
  }
}
.inp {
  margin: 30px 0;
}

.security {
  ul {
    padding: 0 10px;
  }
  li {
    position: relative;
    font-size: 14px;
    line-height: 50px;
    border-bottom: 1px solid #d4d4d4;
    &:last-child {
      border-bottom: none;
    }
    &::after {
      position: absolute;
      top: 21px;
      right: 6px;
      display: block;
      width: 6px;
      height: 6px;
      border-top: 1.5px solid #999;
      border-right: 1.5px solid #999;
      transform: rotate(45deg);
      content: "";
    }
  }
  .btn {
    margin-top: 100px;
    padding: 0 10px;
  }
}
</style>